<template>
  <div class="login-box">
    <div class="login-page-container">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="left"
        label-width="0px"
        class="demo-ruleForm login-container"
      >
        <h3 class="title">{{ loginer }}登入</h3>
        <el-form-item prop="account">
          <el-input type="text" v-model="ruleForm.account" placeholder="請輸入登入帳號" clearable></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" show-password placeholder="請輸入登入密碼" clearable></el-input>
        </el-form-item>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="6">
            <el-checkbox click="remberuser" @change="changCheck" v-model="checked" :checked="checked" class="remember">
              記住密碼
            </el-checkbox>
          </el-col>
          <!-- <el-col :span="12"><el-link @click="onToRegister" href="/register" type="primary" style="float: right;">没有账号？去注册</el-link></el-col> -->
        </el-row>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click="login" :loading="logining">登錄</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { AuthenticationUserInfo } from '@/const'
import Cookies from 'js-cookie'

export default {

  data() {
    return {
      logining: false,
      ruleForm: {
        account: '',
        checkPass: ''
      },
      rules: {
        account: [
          {
            required: true,
            message: '請輸入登錄帳號',
            trigger: 'blur'
          }
        ],
        checkPass: [
          {
            required: true,
            message: '請輸入登錄密碼',
            trigger: 'blur'
          }
        ]
      },
      checked: false //用于记住密码
    }
  },

  computed: {
    loginer() {
      return this.$module === 'prove' ? '鑒證員' : '管理員'
    }
  },

  created() {
    //回车触发登录按钮
    var that = this
    document.onkeydown = function(e) {
      var key = window.event.keyCode
      if (key == 13) {
        that.login()
      }
    }

    this.ruleForm.checkPass = ''
    if(Cookies.get('user')) { // 记住密码操作 自动填入账号密码
      this.checked = true
      let user = JSON.parse(Cookies.get('user'))
      this.ruleForm.account = user.account
      this.ruleForm.checkPass = user.password
    }
  },

  methods: {
    login() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          const params = {
            account: this.ruleForm.account,
            password: this.ruleForm.checkPass
          }
          this.$store.dispatch(this.$module === 'prove' ? 'common/fetchWitnessLogin' : 'common/fetchLogin', params).then(res => {
            if(res.status === 1) {
              this.loading = false
              this.$message.success(res.message)
              sessionStorage.setItem('user', JSON.stringify({ ...res.result, name: params.account, account: params.account, password: params.password })) // session存储用户信息
              if(this.checked) { //如果记住密码，则存入cookies
                Cookies.set('user', JSON.stringify({ ...res.result, name: params.account, account: params.account, password: params.password }))
              }
              this.$router.push({ name: 'homeIndex' })  // 去主页
              return
            }
            this.loading = false
            this.$message.error(res.message)
            return false
          }).catch(err => {
            this.loading = false
            this.$message.error(err)
            return false
          })
        } else {
          this.$message.error('登錄提交時出現意外錯誤！')
          return false
        }
      });
    },

    //跳转注册
    onToRegister(){
      this.$router.push({ name: 'Register' })
    },

    //changCheck修改是否保存密码状态 如果为false则清除之前记住的密码
    //~并清空输入框
    changCheck(e) {
      if(!e) {
        Cookies.remove('user')
        // this.ruleForm.account = ''
        // this.ruleForm.checkPass = ''
      }
    }
  }
}
</script>

<style lang="scss">
@import "../assets/css/them.scss";
.login-box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: $globalBgColor;
}
.login-container {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

label.el-checkbox.remember {
  margin: 0px 0px 35px 0px;
}
</style>
